// 暴露出去一个实例化的 vue-router 的路由实例对象

// 引入 Vue 核心
import Vue from "vue";

// 引入 vue-router 插件
import VueRouter from "vue-router";

// 引入定义好的路由组件 views 文件中写的组件 @ => src
import Films from "@/views/Films";
import FilmsA from "@/views/FilmsA";
import FilmsB from "@/views/FilmsB";
// import FilmDetail from "@/views/FilmDetail";
import Home from "@/views/Home";
import Cinemas from "@/views/Cinemas";
import Login from "@/views/Login";
// import Center from "@/views/Center";

// 注册 vue-router 插件
Vue.use(VueRouter);

// 实例化 路由实例对象
const router = new VueRouter({
  // 配置选项

  // 路由规则集合
  routes: [
    // 一级路由，要渲染是找的 App.vue 中坑位
    {
      // 首页
      path: "/",
      component: Home,
      children: [
        {
          path: "",
          redirect: "/films/nowPlaying",
        },
        {
          // 电影
          path: "films",
          component: Films,
          children: [
            {
              // 正在热映
              path: "nowPlaying",
              component: FilmsA,
            },
            {
              // 即将上映
              path: "comingSoon",
              component: FilmsB,
            },
          ],
        },
        {
          // 影院
          path: "cinemas",
          component: Cinemas,
        },
      ],
    },
    {
      // 电影详情
      path: "/film/:id",
      name: "detail",
      // component: function () {
      //   return import("@/views/HelloDetail.vue");
      // },
      // component: () => import("@/views/FilmDetail.vue"),

      // 如下，可以对拆分出去的文件做一个命名，不然就默认 以 数字 名字
      // webpackChunkName 命名如果相同的话，会打包到一起。
      component: () =>
        import(/* webpackChunkName: "aaa" */ "@/views/FilmDetail.vue"),
    },
    {
      path: "/center",
      name: "center",
      component: () => import(/* webpackChunkName: "aaa" */ "@/views/Center"),
    },
    {
      // login
      path: "/login",
      name: "login",
      component: Login,
    },
  ],
});

// 暴露
export default router;
